/* enum */
import ComponentNameEnum from "@model/enum/ComponentNameEnum";
/* model */
import { SettingGPTRobotModelModuleEnum, SettingGPTRobotModelModules } from "@gpt/model";
/* vue */
import { defineComponent, PropType } from "vue";
/* types */
import { SettingGPTRobotModuleType } from "@gpt/types";
import { isFalsy } from "@src/util/type";

enum SettingGPTHomeViewModelGroupEventEnum {
  Input = 'input',
}

export default defineComponent({
  name: ComponentNameEnum.SettingGPTHomeViewModelGroup,
  props: {
    value: {
      type: String as PropType<String>,
      default: '',
    },
    disabled: {
      type: Boolean,
      default: false
    },
    isDingtalkAssistant: {
      type: Boolean,
      default: false
    },
    onInput: {
      type: Function
    }
  },
  setup(props, { emit }) {
    
  },
  data() {
    return {
      modules: SettingGPTRobotModelModules
    }
  },
  computed: {
    moduleList(): SettingGPTRobotModuleType[] {
      return this.modules.map(item => {
        
        let newItem = {
          ...item
        }
        
        if (this.isDingtalkAssistant && item.value == SettingGPTRobotModelModuleEnum.Other) {
          newItem.disabled = false
          newItem.enable = true
        }
        
        if (this.isDingtalkAssistant && item.value != SettingGPTRobotModelModuleEnum.Other) {
          newItem.disabled = true
          newItem.enable = false
        }
        
        return newItem
      })
    }
  },
  watch: {
    
  },
  mounted() {
    
  },
  methods: {
    onInputHandler(value: string) {
      this.$emit(SettingGPTHomeViewModelGroupEventEnum.Input, value)
    },
    renderRadioItem(item: SettingGPTRobotModuleType) {
      // 提示
      const tooltip = item.tooltip
      // 没有提示
      if (isFalsy(tooltip)) {
        return item.name
      }
      
      return (
        <el-tooltip
          content={tooltip}
          placement="top"
        >
          <span>
            {item.name}
          </span>
        </el-tooltip>
      )
    }
  },
  render() {
    return (
      <div class={ComponentNameEnum.SettingGPTHomeViewModelGroup}>
        <el-radio-group
          disabled={this.disabled}
          value={this.value}
          onInput={this.onInputHandler}
        >
          {this.moduleList.map(item => {
            return (
              <el-radio
                border
                disabled={this.disabled || item.disabled}
                label={item.value}
                key={item.value}
              >
                {this.renderRadioItem(item)}
              </el-radio>
            )
          })}
        </el-radio-group>
      </div>
    )
  }
});